<script setup lang="ts">
import { ref } from 'vue'
import { useWebInfoStore } from '@/stores/webInfo'
import { type Goods } from '@/types/goods'
import { useRouter } from 'vue-router'
const router = useRouter()
let webInfoStore = useWebInfoStore()
const webInfo = webInfoStore.webInfo as any
const imgHandle = (item: any) => item.split(',').shift()
const populary = ref<Goods>()
const populary_array = ref<Goods[]>()
function backToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
function goBuy(item: Goods) {
  router.push({
    path: '/goods',
    query: {
      id: item.id
    }
  })
}

setTimeout(() => {
  let single = JSON.parse(JSON.stringify(webInfo.selected_goods))
  populary.value = single.shift()
  let temp = JSON.parse(JSON.stringify(webInfo.selected_goods))
  temp.shift()
  populary_array.value = temp
}, 1000)
</script>
<template>
  <div class="container">
    <el-carousel
      indicator-position="none"
      height="440px"
      style="width: 100%"
      autoplay
      arrow="never"
    >
      <el-carousel-item v-for="item in webInfo.banner" :key="item.id">
        <img :src="item.banner_url" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="hot flex column a-center" v-for="(item, index) in webInfo.hot_goods" :key="index">
      <div class="hot-title"><< 爆款推荐 >></div>
      <div class="hot-sub-title">— — POPULAR MONEY — —</div>
      <div class="hot-good">
        <img :src="imgHandle(item.goods_img)" alt="" />
        <div class="hot-good-content">
          <div class="hot-good-title" :title="item.goods_name">
            {{ item.goods_name }}
          </div>
          <div class="hot-good-bottom-content">
            <div class="hot-good-bottom">
              <div>
                <div style="font-size: 22px">钜惠</div>
                <div style="font-size: 30px">商品价</div>
              </div>
              <div style="font-size: 72px">
                <span style="font-size: 48px">￥</span>{{ item.price }}
              </div>
            </div>
            <div class="buy-button fright" @click="goBuy(item)">立即抢购></div>
          </div>
        </div>
      </div>
    </div>
    <Transition>
      <div class="hot flex column a-center" v-if="populary">
        <div class="hot-title"><< 新品推荐 >></div>
        <div class="hot-sub-title">— — POPULAR MONEY — —</div>
        <div class="hot-good">
          <img :src="populary.goods_img" alt="" />
          <div class="hot-good-content">
            <div class="hot-good-title" :title="populary.goods_name">
              {{ populary.goods_name }}
            </div>
            <div class="hot-good-bottom-content">
              <div class="hot-good-bottom">
                <div>
                  <div style="font-size: 22px">钜惠</div>
                  <div style="font-size: 30px">商品价</div>
                </div>
                <div style="font-size: 72px">
                  <span style="font-size: 48px">￥</span>{{ populary.price }}
                </div>
              </div>
              <div class="buy-button" @click="goBuy(<Goods>populary)">立即抢购></div>
            </div>
          </div>
        </div>
      </div>
    </Transition>

    <div class="popular-container">
      <div class="popular-item" v-for="(item, index) in populary_array" :key="index">
        <img :src="imgHandle(item.goods_img)" alt="" />
        <div class="goods_name" :title="item.goods_name">
          {{ item.goods_name }}
        </div>
        <div class="hot-good-bottom">
          <div>
            <div style="font-size: 22px">钜惠</div>
            <div style="font-size: 30px">商品价</div>
          </div>
          <div style="font-size: 72px"><span style="font-size: 48px">￥</span>{{ item.price }}</div>
        </div>
        <div class="buy-button" @click="goBuy(item)">立即抢购></div>
      </div>
    </div>

    <div class="backtop" @click="backToTop">
      <img src="@/assets/Imgs/top.png" alt="" />
      <div class="flex column j-center">
        <div style="font-size: 27px">返回顶部查看</div>
        <div style="font-size: 12px">RETURN TO TOP VIEW</div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  background-image: url('@/assets/Imgs/BJ1.png');
}
.hot {
  margin: 0 auto;
  margin-top: 80px;
  width: 1200px;
  height: 750px;
  background-color: #d9f1fa;
  .hot-title {
    margin-top: 30px;
    font-size: 50px;
    color: #0579a2;
  }
  .hot-sub-title {
    font-size: 20px;
    color: #0579a2;
    margin-top: 14px;
  }
  .hot-good {
    margin-top: 40px;
    display: flex;
    .hot-good-content {
      position: relative;
    }
    img {
      margin-left: 20px;
      margin-right: 66px;
      height: 560px;
      width: 560px;
    }
    .hot-good-title {
      max-height: 330px;
      overflow: hidden;
      margin-top: 50px;
      width: 464px;
      font-family: DFZongYi-Bd-80-Win-GB;
      font-weight: bold;
      font-size: 50px;
      color: #0579a2;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //设置排列方式为 弹性盒子排列方式
      -webkit-box-orient: vertical; //子元素排列方式  horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式
      -webkit-line-clamp: 5; //显示多少行的内容
    }
    .hot-good-bottom {
      display: flex;
      color: #0579a2;
      align-items: center;
      justify-content: space-between;
    }
    .hot-good-bottom-content {
      position: absolute;
      bottom: 0px;
      width: 100%;
    }
  }
}
.buy-button {
  width: 190px;
  height: 58px;
  background: #0579a2;
  border-radius: 15px;
  text-align: center;
  line-height: 58px;
  font-size: 36px;
  color: #fef6ed;
  cursor: pointer;
  margin-top: 20px;
}
.fright {
  float: right;
}
.popular-container {
  margin: 0 auto;
  width: 1200px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .popular-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 48%;
    height: 640px;
    padding-bottom: 20px;
    background-color: #d9f1fa;
    img {
      height: 55%;
      width: 95%;
      margin-top: 20px;
      transform: scale(0.95);
      transition: all 0.5s;
      &:hover {
        transform: scale(1);
        transition: all 0.5s;
      }
    }
    .goods_name {
      // margin-top: 10px;
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 57px;
      color: #0579a2;
    }
    .hot-good-bottom {
      margin-top: 20px;
      display: flex;
      width: 95%;
      color: #0579a2;
      align-items: center;
      justify-content: space-between;
    }
    &:hover {
      background-color: rgba($color: #d9f1fa, $alpha: 0.5);
      cursor: pointer;
      transition: all 0.5s;
    }
  }
}

.backtop {
  margin: 50px 0;
  cursor: pointer;
  height: 60px;
  display: flex;
  color: #0579a2;
  justify-content: center;
  img {
    height: 60px;
    width: 60px;
    margin-right: 20px;
  }
}
</style>
